<template>
    <el-container>
        <el-header style="height:80px;" > 
            <div style="font-size:24px;color:#333333;text-align:left;margin-left:50px;margin-top:30px;">
                文本关系提取
            </div>
        </el-header>

        <el-main style="height:100%;width:100%;padding:0px;">
            <el-container style="height:100%;">
                <el-aside style="background-color:#f3f3f4;width:40%;margin-left:-20px;">
                    <div style="display:flex;">
                    <div style="text-align:left;color:#B8B8B8;margin-top:70px;font-size:14px;margin-left:70px;">请输入文本，点击确定抽取关系</div>
                    <div><el-button round plain icon="el-icon-paperclip" @click="fill()" size="mini" style="margin-top:70px;margin-left:140px;"></el-button></div>
                    </div>

                    <div>
                    <el-input
                    type="textarea"
                    :autosize="{ minRows: 2, maxRows: 20}"
                    placeholder="请输入内容"
                    v-model="textarea" style="margin-top:20px;width:70%;">
                    </el-input>
                    </div>
                    <el-button @click="clearText" style="margin-top:50px;">清空</el-button>
                    <el-button @click="uploadText" style="margin-top:50px;" :loading="loadingbut" :icon="btnIcon" :disable="disable">{{loadingbutText}}</el-button>
                </el-aside>
                <el-main style="background-color:#D9D8D8;">
                    <div v-show="!infoshow" style="font-size:14px;color:#606266;margin-top:30px;">上传文本查看结果</div>
                    <div v-show="infoshow" class="table-content">
                        <div style="margin-top:30px;font-size:14px;color:#606266;text-align:left;margin-left:30px;">
                            提取实体
                        </div>
                        <h2 style="margin-top:4px;margin-left:30px;margin-right:30px;height:1px;background-color:#C0C4CC"></h2>
                        <div>
                            <el-tooltip v-for="(entity, index) in data" :key="index" class="item" effect="dark" :content="entity.category" placement="top-start">
                            <el-tag round effect="light" type="primary" style="margin-left:10px;margin-bottom:12px"> 
                                {{ entity.name }} 
                            </el-tag>
                            </el-tooltip>
                        </div>
                        <div style="margin-top:10px;font-size:14px;color:#606266;text-align:left;margin-left:30px;">
                            实体之间的关系
                        </div>
                        <h2 style="margin-top:4px;margin-left:30px;margin-right:30px;height:1px;background-color:#C0C4CC"></h2>
                        <div id="myChart" style="width:700px;height:500px;"></div>
                    </div>
                    </div>
                </el-main>
            </el-container>    
        </el-main>
    </el-container>
    
</template>

<script>
import axios from 'axios'
import icon_url from '@/assets/icon-2.png'
export default {
    name:"upload",
    data() {
        return {
            name: "上传文件",
            checkStatus: "",
            activeTab: 'first',
            iconPath:icon_url,
            textarea:'',
            table_title:[
                {
                    prop: 'input',
                    label: '属性',
                    width: '100',
                    titleAlign: 'center',
                    columnAlign: 'center',

                },
            ],
            infoshow:false,
            data: [],
            links: [],
            entities: [],
            loadingbut: false,
            loadingbutText: "确定",
            btnIcon: "",
            disable: false,
            cellStyle:{background:"#D9D8D8"},
        }
    },
    methods: {
        uploadText(){
            this.loadingbut = true;
            this.loadingbutText = "提取中...";
            this.btnIcon = "el-icon-loading";
            this.disable = true;
            console.log(this.textarea);
            var info = {"text": this.textarea};
            axios.post("http://localhost:8000/relation_entity_extraction/",JSON.stringify(info),{
                headers: {
                    'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'
                }
            }).then(res => {
                console.log(res);
                var entity_list = res.data.entity_list;
                this.data = []
                this.links = []
                this.entities = []
                for(var i=0; i<entity_list.length;i++){
                    this.data.push({'name':entity_list[i][0],'symbolSize':80,'category':entity_list[i][1], 'des':entity_list[i][1]});
                    this.entities.push(entity_list[i][1]);
                    
                };
                var data_list = res.data.data_list;
                for(var i=0; i<data_list.length;i++){
                    this.links.push({'target':data_list[i]['s'],'source':data_list[i]['o'],'name':data_list[i]['p']});
                };
                this.show();
                this.infoshow = true;
                this.loadingbut = false;
                this.loadingbutText = "确定";
                this.btnIcon = "";
                this.disable = false;
            });
        },
        show(){
            let echarts = require('echarts/lib/echarts');
            
            this.myChart = echarts.init(document.getElementById('myChart'));
            console.log(document.getElementById('myChart'));
            var categories = [];

            for (var i = 0; i < this.entities.length; i++) {

                categories[i] = {name: this.entities[i]};
            }


            let option = {
                // title: {text: 'ECharts 关系图'},

                tooltip: {
                    formatter: function (x) {
                    return x.data.des;
                    }
                },

                toolbox: {
                    show: true,
                    feature: {
                        mark: {
                        show: true
                        },
                        restore: {
                        show: true
                        },
                        saveAsImage: {
                        show: true
                        }
                    }
                },
                legend: [{
                    data: categories.map(function (a) {
                    return a.name;
                    })
                }],

                series: [{
                    type: 'graph', // 类型:关系图
                    layout: 'force', //图的布局，类型为力导图
                    symbolSize: 40, // 调整节点的大小
                    roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启
                    edgeSymbol: ['circle', 'arrow'],
                    edgeSymbolSize: [2, 10],
                    edgeLabel: {
                        normal: {
                            textStyle: {
                            fontSize: 20
                            }
                        }
                    },
                    force: {
                    repulsion: 2500,
                    edgeLength: [10, 50]
                    },
                    draggable: true,
                    lineStyle: {
                        normal: {
                        width: 2,
                        color: '#4b565b',
                        }
                    },
                    edgeLabel: {
                        normal: {
                        show: true,
                        formatter: function (x) {
                            return x.data.name;
                        }
                        }
                    },
                    label: {
                        normal: {
                        show: true,
                        textStyle: {}
                        }
                    },
                    data: this.data,
                    links: this.links,
                    categories: categories,
                    
                    // data: [{'name':'肺泡蛋白质沉积症','properties':{'test1':'okk','test2':'666'},'symbolSize':80,'category':'Disease'},{'name':'呼吸内科','symbolSize':70,'category':'Category'}],
                    // links:[{'target':'呼吸内科','source':'肺泡蛋白质沉积症','name':'category','des':'属于'}],
                    // categories: [{'name':'Disease'},{'name':'Category'}]
                }]
            };
            this.myChart.setOption(option);
        },
        fill(){
            this.textarea = "We report the cases of two patients who developed acute hepatitis after taking riluzole at the recommended dose ( 100 mg daily ) for 7 and 4 weeks , respectively ."
        },
        clearText(){
            this.textarea = "";
        }

        
        
    },
}
</script>
<style scoped>
    .elaside{
        background-color: #2b3a49;
    }
    
    .main{
        background-color: #f3f3f4;  
        margin-top:40px;   
    }
    .main-container{
        position:absolute;
        height:100%;
        width:100%;
    }
    .tab-title{
        color:#fff;
    }

</style>